<template>
	<view class="root">
		<view class="index">
			<swiper indicat or-dots circular autoplay>
				<swiper-item v-for="item in lists" :key="item.id">
					<image :src="item.image_src"></image>
				</swiper-item>
			</swiper>
		</view>
		<scroll-view scroll-x="true" class="scroll-content">
			<view class="scroll-item" v-for="(item,index) in topBar" :key="index" @tap="changeTab(index)">
				<text :class="topBarIndex === index? 'f-active-color':'f-color' ">
				{{item.name}}
				</text>
			</view>
		</scroll-view>
		<!-- <Recommend :recommendList="recommendList"></Recommend> -->
		<Recommend :recommendList="recommendList"></Recommend>
		<Card cardTitle="猜你喜欢"></Card>
		<CommodityList></CommodityList>
		<!-- <Card cardTitle="好物推荐"></Card> -->
	</view>

</template>

<script>
	import Recommend from '@/components/index/Recommend.vue'
	import Card from '@/components/common/Card.vue'
	import CommodityList from '@/components/common/CommodityList.vue'
	export default {
		data() {
			return {
				topBarIndex:0,
				lists: [],
				recommendList: [],
				topBar: []
			}
		},
		onLoad() {
			this.getSwipers(),
				this.getRecommend(),
				this.getTopBar()
		},
		methods: {
			// //获取轮播图的数据
			async getSwipers() {
				const res = await this.$myRequest({
					url: '/api/public/v1/home/swiperdata'
				})
				this.lists = res.data.message
				// console.log(11111111, this.lists)
			},
			//获取推荐
			async getRecommend() {
				const res = await this.$myRequest({
					url: '/api/public/v1/home/floordata'
				})
				this.recommendList = res.data.message
				// console.log(1112222, res.data.message)
				// console.log(1112222, this.recommendList)
			},
			//获取topBar
			async getTopBar() {
				const res = await this.$myRequest({
					url: '/api/public/v1/home/catitems'
				})
				this.topBar = res.data.message
				console.log(1112222)
				console.log(1112222, res.data.message)
				// console.log(1112222, this.recommendList)
			},
			changeTab(index){
				if(this.topBarIndex==index){
					return;
				}this.topBarIndex = index;
			}

		},
		components: {
			Recommend,
			Card,
			CommodityList
		},
	}
</script>

<style scoped lang="scss">
	.f-active-color{
		padding: 10rpx 0;
		border-bottom: 6rpx solid #49bdFB;
	}
	.scroll-content{
		width: 100%;
		height: 80rpx;
		white-space: nowrap;
	}
	.scroll-item{
		display: inline-block;
		padding: 10rpx 42rpx;
		font-size: 36rpx;
	}
	swiper {
		width: 750rpx;
		height: 380rpx;

		image {
			height: 100%;
			width: 100%;
		}
	}

	/* .wx-nav{
		text-align: center;
		height: 200rpx; 
		width: 100%;
		line-height-step: 200rpx;
	} */
</style>
